﻿<div>
    <form method="post" class="login-form" data-bind="submit: submit.bind($root, $element)">

        <table class="margin-center">
            <tbody>
                <tr class="tap-space-top">
                    <td class="align-right">
                        <span data-bind="text:Application.Resources.Views.Login.Password">Password</span>
                    </td>
                    <td>
                        <input class="border-brown" data-val="true" name="Password" type="password" data-bind=" value: LoginModel.Password, attr: { placeholder: Application.Resources.Views.Login.Password }, visible: Mode != 'LoginPinSettings'" />
                        <span class="field-validation-valid" data-valmsg-for="Password" data-valmsg-replace="true"></span>
                        <div data-bind="visible: IncorrectLogin, text: (Mode == 'Login' ? Application.Resources.Views.Login.Incorrect_login : Application.Resources.Views.Login.Incorrect_password)">
                            Incorrect password
                        </div>
                    </td>
                </tr>
                <tr class="tap-space-top">
                    <td class="align-right">
                        <span>Pin</span>
                    </td>
                    <td>
                        <input class="maskedText border-brown" name="Pin" type="number" data-bind="value: Pin, valueUpdate: 'keyup', attr: { placeholder: Application.Resources.Views.Login.PIN, title: Application.Resources.Views.Login.Pin_title }, visible: Mode != 'Login', hasFocus: Mode != 'Login'" />
                        <div data-bind="validationMessage:Pin"></div>
                    </td>
                </tr>
                <tr class="tap-space-top">
                    <td class="align-right">
                        <span data-bind="text: Application.Resources.Views.Login.Confirm_pin">Confirm</span>
                    </td>
                    <td>
                        <input class="maskedText border-brown" data-val="true" name="PinCofirmed" type="number" data-bind=" value: PinConfirmed, attr: { placeholder: Application.Resources.Views.Login.Confirm_pin, title: Application.Resources.Views.Login.Pin_title }, visible: Mode == 'LoginPinSettings' || Mode == 'LoggedPinSettings' " />
                        <span class="field-validation-valid" data-valmsg-for="Pin" data-valmsg-replace="true"></span>
                        <div data-bind="visible: IncorrectPin, text: Application.Resources.Views.Login.Invalid_pin">
                            Incorrect pin
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>


            <button name="commit" class="textButton" data-bind="text: (Mode == 'Login' || Mode == 'Locked') ? Application.Resources.Views.Login.Buttons.Login : Application.Resources.Buttons.Save">Login</button>

    </form>
</div>


